<template>
  <div class="smart-ui-template-demo">
	  
	<img :src="'../../../static/logo.png'" alt="示例Logo" style="width: 80px; margin: 10px 0;">
	
    <!-- 🔹 1. 数据绑定 -->
    <h3><strong>{{ }}</strong> 与 <strong>: (v-bind)</strong></h3>
    <!-- 插值语法显示文本 -->
    <p>欢迎语：{{ welcomeMsg }}</p>
    <!-- v-bind 绑定属性（简写 :src） -->
    <img :src="logoUrl" alt="示例Logo" style="width: 80px; margin: 10px 0;">


    <!-- 🔹 2. 点击事件处理 - 修改为色块点击效果 -->
    <h3><strong>@click</strong> 色块点击效果</h3>
    <!-- 新增的色块元素 -->
    <div 
      :style="boxStyle" 
      @click="handleBoxClick"
      class="color-box"
    ></div>
    <p>点击次数: {{ clickCount }}/3</p>
    <p>点击色块改变颜色和大小，3次后恢复原样</p>


    <!-- 🔹 3. 条件判断 -->
    <h3><strong>v-if</strong> 与 <strong>v-else</strong></h3>
    <div v-if="isShowTip">
      <p>当前为「显示」状态（isShowTip: true）</p>
    </div>
    <div v-else>
      <p>当前为「隐藏」状态（isShowTip: false）</p>
    </div>
    <button @click="toggleShow">切换显示状态</button>


    <!-- 🔹 4. 列表渲染 -->
    <h3><strong>v-for</strong></h3>
    <ul>
      <li 
        v-for="(item, index) in goodsList" 
        :key="index" 
        style="margin: 5px 0; padding: 5px; border: 1px solid #eee;"
      >
        索引：{{ index }} | 商品名：{{ item.name }} | 价格：{{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      welcomeMsg: "Hello SmartUI Template!", // 用于「数据绑定」
      logoUrl: "https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0", // 用于「数据绑定」
      isShowTip: true, // 用于「条件判断」
      goodsList: [ // 用于「列表渲染」
        { name: "商品A", price: 99 },
        { name: "商品B", price: 199 },
        { name: "商品C", price: 299 }
      ],
      // 新增的色块相关数据
      clickCount: 0,
      boxStyle: {
        width: '100px',
        height: '100px',
        backgroundColor: '#42b983', // 默认绿色
        transition: 'all 0.3s ease' // 添加过渡动画
      }
    };
  },
  methods: {
    // 修改点击事件为色块变化效果
    handleBoxClick() {
      // 定义三次变化的样式
      const styles = [
        { width: '150px', height: '150px', backgroundColor: '#ff0000' }, // 红色，变大
        { width: '200px', height: '200px', backgroundColor: '#0000ff' }, // 蓝色，更大
        { width: '50px', height: '50px', backgroundColor: '#ffff00' }     // 黄色，变小
      ];
      
      // 增加点击计数
      this.clickCount++;
      
      if (this.clickCount <= 3) {
        // 应用对应次数的样式变化
        this.boxStyle = {
          ...styles[this.clickCount - 1],
          transition: 'all 0.3s ease'
        };
      } else {
        // 第四次点击恢复原样
        this.clickCount = 0;
        this.boxStyle = {
          width: '100px',
          height: '100px',
          backgroundColor: '#42b983',
          transition: 'all 0.3s ease'
        };
      }
    },
    toggleShow() {
      // 「点击事件」：切换条件判断的布尔值
      this.isShowTip = !this.isShowTip;
    }
  }
};
</script>

<style scoped>
.smart-ui-template-demo {
  padding: 20px;
  font-family: sans-serif;
}
button {
  padding: 6px 12px;
  cursor: pointer;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
}
h3 {
  margin: 25px 0 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  color: #333;
}
/* 色块样式 */
.color-box {
  margin: 15px 0;
  cursor: pointer;
  border-radius: 4px;
}
</style>
